<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">授权类型：</span>
                <el-select v-model="auth_type" placeholder="请选择授权类型">
                    <el-option :label="item.title" :value="item.type" v-for="item in radio_label" :key="item.type" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">授权名称：</span>
                <el-input placeholder="输入授权名称" v-model.trim="auth_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>

            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button @click="clickExport">导出</el-button>
            </div>
        </div>
        <div class="table-mb">
            <el-button type="default" plain @click="allDel">批量删除</el-button>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            @selection-change="handleAllSelected"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="auth_id" label="授权ID" width="100"></el-table-column>
            <el-table-column prop="auth_name" label="授权名称" min-width="260"></el-table-column>
            <el-table-column prop="auth_level" label="授权等级" min-width="220"></el-table-column>
            <el-table-column label="供应商" min-width="300">
                <template #default="{ row }">
                    <p>{{ row.supplier_name }}[ID: {{ row.supplier_id }}]</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>

    <go-back />
</template>
<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        auth_type: auth_type.value, // [0:分类授权,1:产品授权]
        so: auth_name.value, // 授权名称
        supplier_id: supplier_id.value, // 授权名称
    }
    getdata("supplier/auth/authList", params)
}

/**
 * 搜索
 * @param {String} auth_type 授权类型
 * @param {String} auth_name 授权名称
 * @param {String} supplier_id 供应商ID
 */
const auth_type = ref(0)
const auth_name = ref("")
const supplier_id = ref("")
const radio_label = ref([
    {
        type: 0,
        title: "分类授权",
    },
    {
        type: 1,
        title: "商品授权",
    },
])
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 删除单个
const clickDel = (row) => {
    postDel(row.id)
}
// 删除多个
const ids = ref([])
const handleAllSelected = (val) => {
    let arrs = []
    for (let i = 0; i < val.length; i++) {
        arrs.push(val[i].id)
    }
    ids.value = arrs
}
const allDel = () => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择需要删除的数据", type: "warning" })
        return
    }
    postDel(ids.value)
}
// 删除接口
function postDel(params) {
    proxy.$axios
        .post("supplier/auth/delete", {
            id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 导出供应商
const clickExport = () => {
    proxy.$axios
        .get("supplier/auth/authExport", {
            params: {
                auth_type: auth_type.value, // [0:分类授权,1:产品授权]
                so: auth_name.value, // 授权名称
                supplier_id: supplier_id.value, // 授权名称
            },
            responseType: "blob",
        })
        .then((res) => {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "AuthorizeSearch",
}
</script>
<style lang="less" scoped></style>
